<template>
    <div>
        <table>
            <tr>
                <td>账号</td><td><input v-model="form.account" type="text"></td>
            </tr>
            <tr>
                <td>密码</td><td><input v-model="form.password" type="password"></td>
            </tr>
        </table>
        <button @click="login">登录</button>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
const form = reactive({
    account: '',
    password: ''
})

const login = () => {
    console.log(form);
    
}

// 在keep-alive包裹的组件上， 生命周期有所改变， 会新增两个周期
// 挂载完成这个只会执行一次
onMounted(()=> {
    console.log('login mounted');
})

// 缓存组件加载的时候执行
onActivated(() => {
    console.log("login Actived");
})

//患者组件卸载或者销毁会执行这个周期
onDeactivated(() => {
    console.log("login Deactive");
})

// 缓存组件不会执行这个销毁周期
onUnmounted(() => {
    console.log('login unmounted');
})
</script>

<script lang="ts">
export default {
    name: 'Login'
}
</script>

<style lang="less" scoped>

</style>